import {
  Text, View, Button,Image
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import react, { useState, useEffect } from 'react';
import { AntDesign } from '@expo/vector-icons';

const Stack = createNativeStackNavigator();

const Home = ({ navigation }) => {
  // 以下useEffect只会最开始执行一次，不会多次执行
  useEffect(() => {
    console.log(123)
  }, [])
  const [num, setNum] = useState(0);
  return <View>
    <Text>首页</Text>
    <Text style={{ fontSize: 32 }}>{num}</Text>
    <Button
      title='点击+1'
      onPress={() => {
        // 状态会保持，点击跳转到别处去但是返回来也是原来的
        setNum(num + 1);
      }}
    />
    <Button
      title='详情页'
      onPress={() => {
        // Detail是下面Stack.Screen中的name名字
        navigation.navigate('Detail', { id: num });
      }}
    />
  </View>
}
// 配置路由的组件中被注入 navigation 对象，用于跳转
// navigation
// navigate
// replace 
// push
// pop
// popToTop
// {route:{params}}解构两层显得麻烦了
const Detail = ({ route, navigation }) => {
  // console.log(route);
  useEffect(() => {
    navigation.setOptions({
      title:route.params.id,
      headerLeft:()=>{
        return <Image
          source={require('./assets/favicon.png')}
        />
      },
      headerTitle:()=>{
        return <Button title='center'/>
      },
      headerRight:()=>{
        return <AntDesign name="setting" size={24} color="black" />
      },
      headerBackVisible:true
    })
  }, [])
  return <View>
    <Text>详情页{route.params.id}</Text>
  </View>
}

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator
        // 所有的Screen共有的属性可以用来放在这里用screenOptions
        screenOptions={
          {
            headerStyle: {
              // 标题栏的颜色
              backgroundColor: '#ccc',
            },
            headerTitleAlign: 'center',
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            }
          }
        }
      >
        <Stack.Screen
          name="Home" component={Home}
          options={
            {
              title: '首页',
              // headerBackVisible: false,
              // headerShown: false,
            }
          }

        />
        <Stack.Screen
          name="Detail" component={Detail}
          // 使用params来动态的改变上面的名字，放一个回调函数给options，把实参相当于路由的那部分传过来
          // 返回值是一个对象需要加（），要是用{}，则里面需要写return{对象}
          options={
            ({ route }) => ({ title: route.params.name })
          }
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
